<template>
    <div class="echart-chart">
        <div class="inside">
            <header><i class="el-icon-location-outline"></i> 房价升值房产所占比例</header>
            <div class="chartBox clearfix">
                <article v-show="!chartNoDataShow">
                    <radioGroup ref="radioGroup" @radioChange="filterYearChange"></radioGroup>
                    <p>图表上的圆形标注点为历史数据最大值及最小值</p>
                    <div class="chart-div" style="height: 300px;">
                        <LargeScaleAreaCharts
                            :domID="'Zip_PctOfHomesIncreasingInValues_AllHomes-chart'"
                            :chartsData="chartsData"
                            :seriesName="'房价升值房产所占比例'"
                            :isMultiply100="false"
                            :isLoading="isLoading"
                            @chartsIsLoading="chartsLoadingStatus">
                        </LargeScaleAreaCharts>
                    </div>
                </article>
                <h4 ref="Zip_PctOfHomesIncreasingInValues_AllHomes_chart_NoData" v-show="chartNoDataShow"></h4>
            </div>
            <p v-show="false">{{getzipcode}}</p>

        </div>
    </div>
</template>

<script>
    import LargeScaleAreaCharts from '@/components/wxMiniProgramCharts/LargeScaleAreaCharts.vue';//公共组件——%大数据量面积折线图
    import { radioGroup } from '@/mixin/echarts_radio';//公共mixin混入——radio-group组件

    export default {
        mixins: [radioGroup],
        data() {
            return {
                chartNoDataShow: false, //判断是否有无数据
                chartsData: null,//图表所需数据
                isLoading: false,//判断图表是否loading

            }
        },
        computed: {
            //房源详情页图表使用——本房源所在邮zipcode
            getzipcode() {
                if(this.$store.getters.get_houseDetailsZipcode){
                    //获取房价升值房产所占比例数据
                    this.get_Zip_PctOfHomesIncreasingInValues_AllHomes(3);
                }
                return this.$store.getters.get_houseDetailsZipcode
            },

        },
        created() {
        },
        mounted() {
        },
        methods: {
            //获取房价升值房产所占比例数据
            get_Zip_PctOfHomesIncreasingInValues_AllHomes(filterYearValue) {
                this.$get(`/analysis/time/56/${this.$store.getters.get_houseDetailsZipcode}`,{
                    t: filterYearValue
                }).then(res => {
                    if (res.status == 0) {
                        if(res.data == null || res.data.length == 0){
                            this.chartNoDataShow = true;
                            this.$refs.Zip_PctOfHomesIncreasingInValues_AllHomes_chart_NoData.innerText = '暂未查询到数据！';
                        }else{
                            this.chartNoDataShow = false;
                            this.chartsData = res.data;
                        }
                    } else {
                        this.chartNoDataShow = true;
                        this.$refs.Zip_PctOfHomesIncreasingInValues_AllHomes_chart_NoData.innerText = res.msg;
                    }
                });
            },
            //接收公共mixinradio-group组件的change事件——按年份筛选
            filterYearChange(filterYearValue) {
                this.isLoading = true;
                this.get_Zip_PctOfHomesIncreasingInValues_AllHomes(filterYearValue);
            },
            //公共子组件封装图表——触发改变图表的loading状态
            chartsLoadingStatus(value){
                // console.log(value);
                this.isLoading = value;
            }

        },
        components: {
            LargeScaleAreaCharts,//公共组件——%大数据量面积折线图
            radioGroup,//公共mixin混入——radio-group组件

        }
    }
</script>

<style scoped lang="less" type="text/less">
</style>
